<template>
	<div class="wrap-content">
		<el-form :inline="true" label="名称" :model="searchData" class="search-form">
			<el-form-item>
				<el-input v-model="searchData.title" placeholder="请输入名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="searchData.introduce" placeholder="请输入详情" clearable></el-input>
			</el-form-item>
			<!-- 
				在实时过滤模式下，“查询”按钮变得可选。
				如果保留，它的作用可以是给用户一个明确的操作感，但它不再是触发过滤的必要条件。
				这里我们去掉了它的 @click 事件，因为过滤是实时的。
			-->
			<el-form-item>
				<el-button color="#000" type="primary">查询</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格数据直接绑定到分页后的计算属性 paginatedList -->
		<el-table :data="paginatedList" border style="width: 100%">
			<el-table-column prop="id" label="序号" width="180"></el-table-column>
			<el-table-column prop="title" label="名称" width="180"></el-table-column>
			<el-table-column prop="introduce" label="详情"></el-table-column>
		</el-table>

		<!-- 分页组件的 total 直接绑定到过滤后列表的长度 -->
		<el-pagination
			class="pagination"
			background
			layout="sizes, prev, pager, next, total"
			:total="filteredList.length"
			:page-size="searchData.pageSize"
			:current-page="searchData.currentPage"
			:page-sizes="[5, 10, 15, 20]"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		/>
	</div>
</template>

<script lang="ts" setup>
import { getProjectList } from '@/api/project';
import { IProject } from '@/types/common.js';

// 原始项目列表（唯一数据源）
const rawProjectList = ref<IProject[]>([]);

// 搜索和分页状态，移除了 dataCount，因为它将由计算属性动态提供
const searchData = reactive({
	title: '',
	introduce: '',
	currentPage: 1,
	pageSize: 10,
});

// 模糊查询函数 (无需改动，设计得很好)
const filterProjects = (projects: IProject[], title: string, introduce: string): IProject[] => {
	const titleQuery = title.trim().toLowerCase();
	const introduceQuery = introduce.trim().toLowerCase();
	if (!titleQuery && !introduceQuery) {
		return projects;
	}
	return projects.filter((item) => {
		const matchTitle = !titleQuery || item.title.toLowerCase().includes(titleQuery);
		const matchIntroduce = !introduceQuery || item.introduce.toLowerCase().includes(introduceQuery);
		return matchTitle && matchIntroduce;
	});
};

// 【优化第一步】: 创建一个计算属性，用于实时过滤数据
// 它取代了旧的 filteredProjectList ref 和 onSearchGoods/watch 逻辑
const filteredList = computed(() => {
	return filterProjects(rawProjectList.value, searchData.title, searchData.introduce);
});

// 【优化第二步】: 创建分页后的列表计算属性 (之前叫 dataList)
// 它的数据源是上面计算出的 filteredList
const paginatedList = computed(() => {
	return filteredList.value.slice(
		(searchData.currentPage - 1) * searchData.pageSize,
		searchData.currentPage * searchData.pageSize
	);
});

// 【优化第三步】: 监听筛选结果数量，防止页码溢出
// 这是一个很好的 watch 用例：当状态变化时，产生一个副作用（修正另一个状态）
watch(
	() => filteredList.value.length,
	() => {
		const totalPages = Math.ceil(filteredList.value.length / searchData.pageSize);
		// 如果当前页大于总页数，自动跳转到最后一页
		if (searchData.currentPage > totalPages && totalPages > 0) {
			searchData.currentPage = totalPages;
		}
	}
);

// 获取初始数据
const fetchData = async () => {
	const res = await getProjectList();
	rawProjectList.value = res;
	// 无需再手动设置 filteredProjectList 和 dataCount
};

// 初始化数据
onMounted(() => {
	fetchData();
});

// 改变当前页码 (无需改动)
const handleCurrentChange = (page: number) => {
	searchData.currentPage = page;
};

// 改变每页显示条数 (无需改动)
const handleSizeChange = (pageSize: number) => {
	searchData.pageSize = pageSize;
	searchData.currentPage = 1; // 重置到第一页
};
</script>

<style lang="less" scoped>
.wrap-content {
	display: flex;
	height: max-content;
	flex-direction: column;

	.pagination {
		display: flex;
		justify-content: right;
		align-items: right;
		margin: 10px;
	}
}
</style>
